<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        // CSS 选择器 
            // 元素选择器（Type Selector）：选择特定类型的 HTML 元素，如 div、p、a 等。
                //   p {
                //     color: blue;
                //    }

            // 类选择器（Class Selector）：选择带有特定类名的元素，使用 . 开头。
                // .highlight {
                //     background-color: yellow;
                // }

            // ID 选择器（ID Selector）：选择带有特定 ID 的元素，使用 # 开头。
                // #header {
                //     font-size: 24px;
                // }

            // 属性选择器（Attribute Selector）：选择具有特定属性的元素。
                // input[type="text"] {
                //     border: 1px solid black;
                // }

            // 伪类选择器（Pseudo-class Selector）：选择处于特定状态的元素。
                // a:hover {
                //     color: red;
                // }

            // 伪元素选择器（Pseudo-element Selector）：选择元素的特定部分，如第一个字母、内容前后等。
                // p::first-letter {
                //     font-size: 2em;
                // }

            // 组合选择器（Combinator Selector）：组合多个选择器以选择特定关系的元素
                // 子选择器（>）：div > p 选择直接子元素。
                // 后代选择器（ ）：div p 选择所有后代元素。
                // 相邻兄弟选择器（+）：h1 + p 选择紧接在 h1 后面的 p 元素。
                // 普通兄弟选择器（~）：h1 ~ p 选择所有紧接在 h1 后面的 p 元素。


        // 可以继承的css属性
            // 文本相关属性：
            /**
             * color：文字颜色。
             * font-family：字体族。
             * font-size：字体大小。
             * font-style：字体样式（如斜体）。
             * font-weight：字体粗细。
             * text-align：文本对齐方式。
             * line-height：行高。
             * text-indent：文本缩进。
             * text-transform：文本转换（如大写、小写）。
             * visibility：可见性（visible、hidden）。
            */
            // 列表相关属性：
            /**
             * list-style：列表样式类型、图像、位置。
            */
            // 表格布局相关属性：
            /**
             * border-collapse：表格边框的折叠方式。
             * caption-side：表格标题的位置。
            */

        // 不可继承的属性
        // 大部分与盒模型、定位、布局等相关的属性是不可继承的，如：

            /**
             * margin：外边距。
             * padding：内边距。
             * border：边框。
             * width：宽度。
             * height：高度。
             * background：背景样式。
             * display：显示类型。
             * position：定位方式。
             * z-index：堆叠顺序。
            */

        // 如何强制继承或防止继承

            // 强制继承：对于通常不可继承的属性，可以通过设置 inherit 强制子元素继承父元素的某个属性。
                // div {
                //     width: 100px;
                // }

                // span {
                //     width: inherit; /* 继承父元素的宽度 */
                // }

            //防止继承：对于通常可继承的属性，可以通过设置 initial 或 unset 来防止继承，确保子元素使用默认或初始值。
                // p {
                //     color: black;
                // }

                // span {
                //     color: initial; /* 使用浏览器的默认颜色 */
                // }

    </script>
</body>
</html>l